<script setup>
import { onMounted, ref } from 'vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import icon_house from '@/assets/imgs/ic_fwzs.png'
import {
    getEnterpriseRanking,
    getRankingType,
    getEnterpriseCreditEvaluation,
    getTimeTrend,
} from './api.js'

const investRateChartBarRef = ref(null)

const barColors = [
{
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: '#FFE676' // 0% 处的颜色
    }, {
        offset: 1, color: '#FF933A' // 100% 处的颜色
    }],
    global: false // 缺省为 false
    },
    {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: '#CBFBFF' // 0% 处的颜色
    }, {
        offset: 1, color: '#02AAFA' // 100% 处的颜色
    }],
    global: false // 缺省为 false
    }
]
const getChartBarOption = (data) => {

  return {
    backgroundColor: 'transparent',
    tooltip: {
       trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        show: false,
      top: 'top',
      right: '14%',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 30,
    },
    grid: {
      left: '5%',
      right: '5%',
      top: '15%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.xAxis,
    },
    yAxis: {
        name: '单位(次)',
        type: 'value'
    },
    series: data.series.map((item,i)=> {
        return {
            name: item.name,
            type: 'bar',
            itemStyle: {
                color: barColors[item.colorIndex]
            },
            emphasis: {
                focus: 'series'
            },
            data: item.data, // [320, 302, 301, 334, 390, 330, 320]
        }
    })
  }
}

const dishonestyTimeTrendChartBarRef = ref(null)
const updateDataDishonestyTimeTrend = (data) => {
    data.series = [{
        name: '失信记录',
        data: data.data
    }
    ]
    dishonestyTimeTrendChartBarRef.value?.updateOption(getChartBarOption(data))
}

const isLoading = ref(false)
const tabList = ref([
    "施工企业（房屋建筑类）",
    "施工企业（市政基础设施类）",
    "监理企业诚信排名",
    "勘察企业诚信排名",
    "设计企业诚信排名",
    "审图机构诚信排名",
])
const activeName = ref('施工企业（房屋建筑类）')
const tableData5 = ref([])
const tableData10 = ref([])
const updateDataRanking = (data) => {
    tableData5.value = data.slice(0, 5)
    tableData10.value = data.slice(5, 10)
}
const reqTableData = () => {
    isLoading.value = true
    getEnterpriseRanking({ type: activeName.value })
        .then(res => {
            updateDataRanking(res.data)
        }).finally(() => {
            isLoading.value = false
        })
}
const handelTabChange = (name) => {
    activeName.value = name
    reqTableData()
}

const tableDataEvaluation = ref([])
const updateDataEvaluation = (data) => {
    tableDataEvaluation.value = data
}

const reqData = () => {
    isLoading.value = true
    Promise.all([
        getEnterpriseRanking({ type: '施工企业（房屋建筑类）'}),
        // getRankingType(),
        getEnterpriseCreditEvaluation(),
        getTimeTrend(),
    ]).then((res) => {
        console.log('res', res)
        if (res[0].success) {
            activeName.value = '施工企业（房屋建筑类）'
            updateDataRanking(res[0].data)
        }
        if (res[1].success) {
            updateDataEvaluation(res[1].data)
        }
        if (res[2].success) {
            updateDataDishonestyTimeTrend(res[2].data)
        }
    }).finally(() => {
        isLoading.value = false
    })
}

onMounted(() => {

    reqData()
})

</script>

<template>
    <div class="full-wrap">
        <div class="row">
            <div class="panel">
                <div class="panel-title">企业诚信排名</div>
                <div class="panel-content panel-ranking-list">
                    <div class="tab-list">
                        <div class="tab-list-item" :class="activeName === item ? 'on' : ''" v-for="item in tabList" @click="handelTabChange(item)">{{ item }}</div>
                    </div>
                    <div class="tab-content">
                        <div class="table-wrap">
                            <div class="tr th">
                                <span class="td ranking"></span>
                                <span class="td name">企业名称</span>
                                <span class="td">守信分</span>
                                <span class="td">失信分</span>
                                <span class="td">综合评价分</span>
                                <span class="td">专业评价分</span>
                                <span class="td">总分</span>
                            </div>
                            <el-scrollbar style="height: 250px">
                                <div class="list-wrap" ref="listWrap">
                                    <div class="tr" :data="item" v-for="(item, index) in tableData5" :key="index" >
                                        <div class="td ranking"><span class="icon" :class="[['a', 'b', 'c'][index]]">{{ index + 1 }}</span></div>
                                        <div class="td name">
                                            <el-tooltip :content="item.enterpriseName"  placement="top" effect="light">
                                                {{ item.enterpriseName }}
                                            </el-tooltip>
                                        </div>
                                        <div class="td">{{item.trustScore}}</div>
                                        <div class="td">{{item.discreditScore}}</div>
                                        <div class="td">{{item.professionalScore}}</div>
                                        <div class="td">{{item.comprehensiveScore}}</div>
                                        <div class="td yellow">{{item.totalScore}}</div>
                                    </div>
                                    <!-- <div class="no-data" v-if="!tableData.length && !isLoading">暂无数据</div>
                                    <div class="no-data loading" v-if="isLoading">加载中...</div> -->
                                    <!-- <div class="no-data no-more" v-if="noMore && !isLoading">没有更多</div> -->
                                </div>
                            </el-scrollbar>
                        </div>
                        <div class="table-wrap">
                            <div class="tr th">
                                <span class="td ranking"></span>
                                <span class="td name">企业名称</span>
                                <span class="td">守信分</span>
                                <span class="td">失信分</span>
                                <span class="td">综合评价分</span>
                                <span class="td">专业评价分</span>
                                <span class="td">总分</span>
                            </div>
                            <el-scrollbar style="height: 250px">
                                <div class="list-wrap" ref="listWrap">
                                    <div class="tr" :data="item" v-for="(item, index) in tableData10" :key="index" >
                                        <div class="td ranking"><span class="icon">{{ index + 6 }}</span></div>
                                        <div class="td name">
                                            <el-tooltip :content="item.enterpriseName"  placement="top" effect="light">
                                                {{ item.enterpriseName }}
                                            </el-tooltip>
                                        </div>
                                        <div class="td">{{item.trustScore}}</div>
                                        <div class="td">{{item.discreditScore}}</div>
                                        <div class="td">{{item.professionalScore}}</div>
                                        <div class="td">{{item.comprehensiveScore}}</div>
                                        <div class="td yellow">{{item.totalScore}}</div>
                                    </div>
                                    <!-- <div class="no-data" v-if="!tableData.length && !isLoading">暂无数据</div>
                                    <div class="no-data loading" v-if="isLoading">加载中...</div> -->
                                    <!-- <div class="no-data no-more" v-if="noMore && !isLoading">没有更多</div> -->
                                </div>
                            </el-scrollbar>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="panel panel-total">
                <div class="panel-title">诚信评价公式</div>
                <div class="panel-content">
                    <div class="table-wrap">
                        <div class="tr th">
                            <span class="td name">企业名称</span>
                            <span class="td">企业类型</span>
                            <span class="td scale">诚信评价类型</span>
                            <span class="td cose">评价分值</span>
                            <span class="td time">公式结束时间</span>
                        </div>
                        <el-scrollbar style="height: 300px">
                            <div class="list-wrap" ref="listWrap">
                                <div class="tr" :data="item" v-for="(item, index) in tableDataEvaluation" :key="index" >
                                    <div class="td name">
                                        <el-tooltip :content="item.name"  placement="top" effect="light">
                                            {{ item.name }}
                                        </el-tooltip>
                                    </div>
                                    <div class="td">{{item.type}}</div>
                                    <div class="td scale">{{item.goodFaithType}}</div>
                                    <div class="td cose yellow">{{item.goodFaithScore}}</div>
                                    <div class="td time">
                                        <el-tooltip :content="item.endTime"  placement="top" effect="light">
                                            {{item.endTime}}
                                        </el-tooltip>
                                    </div>
                                </div>
                                <div class="no-data" v-if="!tableDataEvaluation.length && !isLoading">暂无数据</div>
                                <div class="no-data loading" v-if="isLoading">加载中...</div>
                                <!-- <div class="no-data no-more" v-if="noMore && !isLoading">没有更多</div> -->
                            </div>
                        </el-scrollbar>
                    </div>
                </div>
            </div>
            <div class="panel panel-scale">
                <div class="panel-title">失信记录时间趋势</div>
                <div class="panel-content">
                    <div class="chart">
                        <draw-echarts
                            ref="dishonestyTimeTrendChartBarRef"
                            width="880"
                            height="320"
                            :options="{}"
                        ></draw-echarts>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.full-wrap {
    height: 100%;
}
.row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    
    .panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 410px;
        margin-bottom: 20px;
        padding: 10px 20px 20px 20px;
        border: 1px solid;
        border-top: none;
        border-image: linear-gradient(to bottom, rgba(6, 79, 147, 0), #064F93) 1;
        background: linear-gradient(to bottom, #0A143E35, #0A143E);
        .panel-title {  
            height: 32px;
            line-height: 32px;
            text-align: center;
            color: #fff;
            z-index: 1020;
        }
        .panel-content {
        }
    }
    
    .panel-ranking-list {
        width: 100%;

        .tab-list {
            display: flex;
            gap: 16px;
            .tab-list-item {
                width: 200px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                color: #125B9F;
                border: 1px solid #125B9F;
                cursor: pointer;
            }
            .tab-list-item.on {
                color: #04A7FF;
                border: 1px solid #04A7FF;
            }
        }
        .tab-content {
            margin-top: 16px;
            display: flex;
            gap: 20px;
            .table-wrap {
                flex: 1;

                .ranking {
                    text-align: center;
                    .icon {
                        display: inline-block;
                        width: 30px;
                        height: 30px;
                        line-height: 30px;
                        border-radius: 50%;
                        background: #FDFCFC;
                        color: #1A1673;
                    }
                    .icon.a {
                        background: #FCA92B;
                    }
                    .icon.b {
                        background: #B8D0FD;
                    }
                    .icon.c {
                        background: #B76B46;
                    }
                }
            }
        }
    }

    .table-wrap {
        color: #ffffff;
        
        .tr {
            display: flex;
            height: 50px;
            line-height: 50px;
            .td {
                flex: 1;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                word-break: break-all;
                padding: 0 4px;
            }
            .name {
                flex: 4;
            }
            .td.yellow {
                color: #FFE802;
            }
            .cose {
                color: #25F9F2;
            }
        }
        .th {
            color: #06E5FF;
        }
        .tr:nth-child(odd) {
            background-color: #1c2d4c;
        }
        .tr:nth-child(even) {
            background-color: #08142d;
        }

        
        .no-data {
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 3;
            color: #B9D9F4;
        }
    }
}
</style>